<!--  -->
<template>
  <div class="">
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="filter.name" placeholder="资方" allow-clear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <cascaderSelect
                  :province-code.sync="filter.provinceCode"
                  :city-code.sync="filter.cityCode"
                  :district-code.sync="filter.districtCode"
                  placeholder="省市区"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="filter.contact" placeholder="联系人" allow-clear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="filter.contactPhone" placeholder="联系电话" allow-clear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-select v-model="filter.status" placeholder="状态" allow-clear>
                  <a-select-option value="1">启用</a-select-option>
                  <a-select-option value="0">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <DateTimeRange
                  v-model="filter._dateRange"
                  :startDate.sync="filter.beginTime"
                  :endDate.sync="filter.endTime"
                  :placeholder="['创建开始时间', '创建结束时间']"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card class="table-wrapper">
      <div class="box">
        <div class="box-act">
          <a-button type="primary" size="small" @click="addHandler"> 新增 </a-button>
          <a-button size="small" @click="batchAction('0')"> 批量启用 </a-button>
          <a-button size="small" @click="batchAction('1')"> 批量禁用 </a-button>
        </div>
      </div>
      <a-table
        :loading="tableLoading"
        bordered
        :columns="columns"
        :pagination="pagination"
        :data-source="tableData || []"
        @change="(e) => handle(e)"
        :scroll="{ y: tableHeight }"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="code" slot-scope="text, record" class="pointer" @click="editHandler(record)">
          <div class="text">
            <a-icon type="edit" theme="twoTone" class="mr-10" /> {{ text }}  
          </div>
          （{{ record.code }}）
        </span>
        <span slot="address" slot-scope="text, record">
          {{ (record.provinceName || '') + (record.cityName || '') + (record.districtName || '') }}
          {{ text }}
        </span>
        <span slot="statusDesc" slot-scope="text, record">
          <a-switch
            :checked="record.status == 1"
            checked-children="启用"
            un-checked-children="禁用"
            @change="(val) => onChangeStatus(record, val)"
          />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="setupCapitalHandler(record)">资方设置</a-button>
        </span>
      </a-table>
    </a-card>
    <capital-form ref="capital-form" @on-submit="handle" />
    <setup-capital ref="setup-capital" @on-submit="handle" />
  </div>
</template>

<script>
import { getCapitalList, setCapitalAble } from '@/api/capital'
import { DateTimeRange } from '@/components'
import CapitalForm from './module/capital-form.vue'
import SetupCapital from "./module/setup-capital.vue"
import GoTask from '@/components/goTask'
import cascaderSelect from '@/myComponents/cascader-select.vue'
// import moment from 'moment'
// const beginTime = moment().subtract(3, 'days').format('YYYY-MM-DD 00:00:00')
// const endTime = moment().format('YYYY-MM-DD 23:59:59')
export default {
  data() {
    return {
      tableLoading: false,
      filter: {
        pageSize: 10,
        pageNum: 1,
        beginTime: '',
        endTime: '',
        _dateRange: [],
        name: '',
        contact: '',
        contactPhone: '',
        provinceCode: undefined,
        cityCode: undefined,
        districtCode: undefined
      },
      tableData: [],
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      columns: [
        { title: '资方', dataIndex: 'name', scopedSlots: { customRender: 'code' } },
        { title: '详细地址', dataIndex: 'address', scopedSlots: { customRender: 'address' } },
        { title: '联系人', dataIndex: 'contact' },
        { title: '联系电话', dataIndex: 'contactPhone' },
        { title: '状态', dataIndex: 'statusDesc', scopedSlots: { customRender: 'statusDesc' } },
        { title: '创建时间', dataIndex: 'createTime' },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    tableHeight() {
      return document.body.clientHeight - this.tabbarHeight
    }
  },
  components: {
    GoTask,
    DateTimeRange,
    CapitalForm,
    cascaderSelect,
    SetupCapital,
  },
  activated() {
    this.handle()
  },
  mounted() {
    this.handle()
  },
  methods: {
    batchAction(status) {
      if (this.selectedRows.length) {
        const record = {
          status,
          id: this.selectedRows.map((v) => v.id)
        }
        this.onChangeStatus(record)
      } else {
        this.$notification['error']({
          message: '错误提示',
          description: status == 1 ? '请选择批量禁用数据' : '请选择批量启用数据'
        })
      }
    },
    onChangeStatus(record) {
      const vm = this
      const type = record.status == 1 ? 'disable' : 'able'
      this.$confirm({
        title: record.status == 1 ? '禁用' : '启用',
        content: (
          <div>
            {record.status == '1' ? (
              <p>
                <span style="color:#FF4E4E">{record.name || ''}禁用后，将无法使用</span>
                ，你还要继续吗？
              </p>
            ) : (
              <p>确认启用{record.name || ''}？</p>
            )}
          </div>
        ),
        class: 'confirm-box',
        onOk() {
          return new Promise((resolve, reject) => {
            setCapitalAble({ idList: record.name ? [record.id] : record.id }, type)
              .then(() => {
                vm.$notification['success']({
                  message: '成功提示',
                  description: record.status == 1 ? '禁用成功' : '启用成功'
                })
                vm.handle()
                vm.selectedRowKeys = []
                vm.selectedRows = []
                resolve()
              })
              .catch(() => {
                return reject(new Error(''))
              })
          })
        }
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    addHandler() {
      this.$refs['capital-form'].open({})
    },
    editHandler(record) {
      this.$refs['capital-form'].open(record)
    },
    setupCapitalHandler(record) {
      this.$refs['setup-capital'].open(record)
    },
    handle(v) {
      if (v && v.current) {
        if (this.filter.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.filter.pageNum = v.current
        } else {
          this.filter.pageSize = v.pageSize
          this.filter.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.pageNum = 1
        this.filter.pageSize = 10
        this.pagination.current = 1
      }
      this.tableLoading = true
      getCapitalList(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-act {
  display: flex;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393f2;
      font-size: 16px;
      font-weight: 500;
      color: #4393f2;
    }
  }
}
.box-total-item {
  font-size: 12px;
}
</style>
